import React, {
    Component
} from "react";
import {
    usergroupTplus0Info,
    saveUsergroupTplus0
} from "../../../fetch/fetchApi";
import {
    Button,
    Input,
    Row,
    Col,
    Select,
    Divider,
    Modal,
    Table,
    Switch,
    message
} from 'antd';
import {
    FinancePaymentType
} from "../../contant";
import Immutable from 'immutable';
import classNames from 'classnames';

class Tplus0Index extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            data: [],
            pagination: {},
            loading: false,
            configModalVisible: false,
        };
    }

    init() {
        this.query = {
            page: 1,
            pagecount: 10
        };

        this.tableColumns = [{
            title: '管理账号',
            dataIndex: 'account',
            fixed: 'left',
        }, {
            title: '企业名称',
            dataIndex: 'companyName'
        }, {
            title: '联系人',
            dataIndex: 'chiefName'
        }, {
            title: '联系电话',
            dataIndex: 'chiefPhone'
        }, {
            title: 'T+0结算',
            dataIndex: 'paymentInfo',
            render: (text, record) => (
                <div>
                        {text ? text.map((item, index) => {
                        return FinancePaymentType.map((item2, index2) => {
                            if (item2.id === item.paymentType && item.status === 1) {
                                return item2.name + (index === text.length - 1 ? "支付" : "支付/");
                            }
                        })
                    }) : '未开启'}
                    </div>
            )
        }, {
            title: '配置时间',
            dataIndex: 'paymentInfo',
            key: 'configTime',
            render: (text, record) => (
                <div>
                    {text&&text[0]&&text[0].lastSettingTime}
                </div>
            )
        }, {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 120,
            render: (text, record) => (
                <div><a href='javascript:void(0);' onClick={(e) => this.showConfigModal(record)}>配置</a></div>
            )
        }];

    }

    showConfigModal = (record) => {
        const wxParamsArr = record.paymentInfo ? (record.paymentInfo.filter((item) => {
            return item.paymentType === FinancePaymentType.filter((item2) => item2.type === "WX")[0].id
        })) : [];

        const wxParams = Immutable.fromJS(wxParamsArr.length ? wxParamsArr[0] : {});
        console.log(wxParamsArr.length);
        this.setState({
            configModalVisible: true,
            wxDefaultChecked: wxParamsArr.length ? true : false,
            wxParams: wxParams
        })
    }

    queryHandler = () => {
        this.query["page"] = 1;
        if (!this.query.appkey) {
            message.error("请输入企业标识！");
            return;
        }
        this.fetch();
    }

    handleAppkeyInputChange = (e) => {
        this.query.appkey = e.target.value;
    }

    handleTableChange = (pagination, filters, sorter) => {
        console.log(pagination);
        this.query.page = pagination.current;
        this.fetch();
    }

    fetch = (params = {}) => {
        this.setState({
            loading: true
        })
        usergroupTplus0Info(this.query).then((res) => {
            console.log(res);
            if (res && res.data && res.data.code === "200") {
                const data = res.data.data;

                const pagination = this.state.pagination;
                pagination.total = res.data.pageLimit.totalCount;
                pagination.current = parseInt(this.query.page);
                this.setState({
                    data: res.data.data,
                    loading: false,
                    pagination
                });
            } else {
                this.setState({
                    data: [],
                    loading: false,
                });
            }
        });
    }

    handleConfigModalCancel = () => {
        this.setState({
            configModalVisible: false
        })
    }

    handleWxSwitchChange = (checked) => {
        let wxParams = this.state.wxParams;
        let wxParamsNew = wxParams.toJS();
        wxParamsNew.status = checked ? 1 : 2;

        this.setState({
            wxDefaultChecked: checked,
            wxParams: Immutable.fromJS(wxParamsNew)
        })

    }

    handleWxInputChange = (e) => {
        let wxParams = this.state.wxParams;
        let wxParamsNew = wxParams.toJS();
        wxParamsNew.paymentType = FinancePaymentType.filter((item) => item.type === "WX")[0].id;
        wxParamsNew.status = wxParams.get("status") || 1;
        wxParamsNew.paymentIdentity = e.target.value;
        this.setState({
            wxParams: Immutable.fromJS(wxParamsNew)
        })
    }

    handleConfigModalOk = () => {
        const wxParams = this.state.wxParams;
        if (!wxParams.get("paymentIdentity")) {
            message.error("缺少参数");
            return;
        }
        this.setState({
            configModalLoading: true
        })
        saveUsergroupTplus0({
            settings: JSON.stringify([wxParams]),
            equipOwnerId: this.query.appkey
        }).then((res) => {
            console.log(res);
            if (res && res.data.code === "200") {
                message.success("保存成功");
                this.fetch();
            }
            this.setState({
                configModalLoading: false,
                configModalVisible: false
            })
        })
    }

    render() {
        const className = classNames({
            'sc-table': true,
            'table-center': 'table-center'
        });

        const Content = <div className="sc-page-content">
            <div className="page-toolbar">
                <Row gutter={8}>
                    <Col span={5} className="whole-fill">
                        <Input placeholder="企业唯一标识" onChange={this.handleAppkeyInputChange}/>
                    </Col>
                    <Col>
                        <Button type="primary" onClick={this.queryHandler}>查询</Button>
                    </Col>
                </Row>
            </div>
            <div className="page-panel">
                <Table className={className} onChange={this.handleTableChange} dataSource={this.state.data} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
            </div>

            <Modal title="配置" confirmLoading={this.state.configModalLoading} visible={this.state.configModalVisible} onOk={this.handleConfigModalOk} onCancel={this.handleConfigModalCancel}>
                
                <Row gutter={20} style={{'height': '3rem'}}>
                    <Col span={3} offset={3}>
                        <Switch checked={this.state.wxDefaultChecked} onChange={this.handleWxSwitchChange} />
                    </Col>
                    <Col span={5}>
                        <span>微信支付</span>
                    </Col>
                    {this.state.wxDefaultChecked && <Col span={10}>
                        <Input placeholder="请输入参数" onChange={this.handleWxInputChange} value={this.state.wxParams.get("paymentIdentity")}/>
                    </Col>}
                </Row>
            </Modal>
        </div>;

        return Content;
    }
}

export default Tplus0Index;